<template>

    <Category></Category>

    <el-card style="margin: 10px 0px;">

        <div v-show="scene == 0">
            <el-button type="primary" size="default" icon="Plus" @click="addAttr">添加属性</el-button>

            <el-table style="margin: 10px 0px;" border>
                <el-table-column prop="date" label="序号" width="100" align="center" type="inline" />
                <el-table-column prop="name" label="属性名称" width="180" />
                <el-table-column prop="address" label="属性值名称" />
                <el-table-column prop="name" label="操作" width="180" />
            </el-table>
        </div>

        <!-- 展示添加和修改属性 -->
        <div v-show="scene == 1">
            <el-form ref="formRef" label-width="auto">
                <el-form-item label="属性名称" prop="name">
                    <el-input placeholder="请输入属性名称" style="width: 300px;" />
                </el-form-item>

                <el-button type="primary" size="default" icon="plus" @click="addAtt"> 添加属性 </el-button>
                <el-button type="primary" size="default" @click="cancel"> 取消 </el-button>

                <el-table border style="margin: 10px 0px" :data="attList">
                    <el-table-column prop="date" label="序号" width="80px" type="index" align="center" />
                    <el-table-column prop="name" label="属性值名称">
                        <template #="{ row }">
                            <el-input v-model="row.value" placeholder="请输入属性值名称" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template #="{ $index }">
                            <el-button type="danger" icon="Delete" @click="deleteAction($index)"></el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <el-button type="primary" size="default"> 保存 </el-button>
                <el-button type="primary" size="default" @click="cancel"> 取消 </el-button>
            </el-form>
        </div>
    </el-card>
</template>

<script setup lang='ts' name='Attr'>
import { ref } from 'vue';

let scene = ref<number>(0);
let attList = ref<any[]>([]);

/// 添加属性按钮
const addAttr = () => {
    scene.value = 1;
}

const cancel = () => {
    scene.value = 0;
}

/// 添加属性值
const addAtt = () => {
    attList.value.push({
        value: ''
    });
}

/// 删除
const deleteAction = (index: number) => {
    attList.value.splice(index, 1);
}

</script>

<style scoped lang='scss'></style>